<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改商品分类')" />
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-category-edit" th:object="${mallCategory}">
            <input name="categoryId" th:field="*{categoryId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">上级分类：</label>
                <div class="col-sm-8">
                    <select name="pid" class="form-control m-b">
                        <option value="0" >无上级</option>
                        <option th:each="category : ${categorys}" th:selected="${category.categoryId==mallCategory.pid?true:false}"  th:value="${category.categoryId}" th:text="${category.categoryName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品分类名称：</label>
                <div class="col-sm-8">
                    <input name="categoryName" th:field="*{categoryName}"  class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">属性</label>
                <div class="col-sm-8">
                    <select id="property" name="property" class="form-control select2-multiple" multiple>
                        <option value="">请选择属性</option>
                        <option th:each="property : ${propertys}" th:value="${property.propertyId}" th:text="${property.propertyName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="sort" th:field="*{sort}"  class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-new thumbnail" style="width: 140px; height: 180px;">
                            <img th:src="*{icon}">
                        </div>
                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input id="icon" type="file"></span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                        </div>
                    </div>
                    <input name="icon" id="iconPath" th:field="*{icon}"  class="form-control" type="hidden">
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js"/>
    <th:block th:include="include :: jasny-bootstrap-js" />
    <script type="text/javascript">
        var prefix = ctx + "mall/category";
        $("#form-category-edit").validate({
            focusCleanup: true
        });
        $('#icon').on('change.bs.fileinput ', function (e) {
            var formData = new FormData();
            var file = $('#icon')[0].files[0];
            if(file!=null){
                formData.append('file',file);
                formData.append('type',3);
                console.log(formData.get('file'))
                $.ajax({
                    url: ctx+'common/upload',
                    data:formData,
                    type:'post',
                    dataType:'json',
                    processData:false,
                    contentType:false,
                    success:function (res) {
                        console.log(res)
                        if(res.code === 0){
                            $("#iconPath").val(res.url);
                        }else{
                            $.modal.alertError(res.msg);
                        }

                    }
                })
            }
            // 处理自己的业务
        });
        $(document).ready(function () {
            $('#property').val([[${categoryPropertys}]]).trigger("change");
        })


        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-category-edit').serialize());
            }
        }
    </script>
</body>
</html>